<template>
	<view class="content">
		<!-- 已选择服务范围 -->
		<view class="top">
			<view class="title">已选择服务范围（{{selectedTags.length}}/5）</view>
			<view class="list">
				<view v-for="(tag, index) in selectedTags" :key="tag.id" class="item">
					{{ tag.name }}
					<uni-icons class="delete-icon" type="closeempty" size="16" color="#2F80ED" @click="removeTag(index)"
						style="margin-left:10rpx" />
				</view>
			</view>
			<!-- 自定义标签输入 -->
			<view class="tag-input-container uni-flex uni-align-center uni-justify-between">
				<input class="tag-input uni-flex-item" v-model="newTag" placeholder="输入自定义服务项，6个字以内" maxlength="6"
					@keyup.enter="addTag" />
				<view class="add-tag-btn" @click="addTag">添加标签</view>
			</view>
		</view>
		<!-- 服务分类列表 -->
		<view class="bottom">
			<long-categories :list="list"
				:maxSelected="maxSelectable - (selectedTags.filter(tag => !tag.isCustom).length)"
				@change="handleCategoryChange"></long-categories>

		</view>

	</view>
	<view class="button-group">
		<button class="reset-btn" @click="handleReset">重置</button>
		<button class="confirm-btn" @click="handleConfirm">确定</button>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		getServiceInfoList,
		addServiceItem
	} from '@/api/contract.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const list = ref([])
	const selectedTags = ref([]) // 存储所有已选择的服务项（系统+自定义）
	const newTag = ref('')
	const maxSelectable = 5 // 最多可选择5项
	const selectedServiceItems = ref(new Set()) // 存储已选择的系统服务项ID

	onLoad(() => {
		const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel();
		// 接收父页面传递的最新已选服务项
		eventChannel.on('acceptDataFromOpenerPage', (data) => {
			if (data.selectedServices && Array.isArray(data.selectedServices)) {
				// 完全覆盖现有selectedTags，确保删除的标签被移除
				selectedTags.value = data.selectedServices.map(item => ({
					id: item.id || `init_${Date.now()}`,
					name: item.name,
					serviceItemId: item.serviceItemId || item.id,
					isCustom: item.isCustom || false
				}));
				// 重新初始化系统服务项集合（关键：清除旧数据，同步新数据）
				selectedServiceItems.value.clear(); // 先清空旧集合
				selectedTags.value
					.filter(tag => tag.serviceItemId && !tag.isCustom)
					.forEach(tag => {
						selectedServiceItems.value.add(tag.serviceItemId); // 添加最新ID
					});
				// 更新分类组件的选中状态和禁用状态
				updateListDisabledStatus();
			}
		});
		eventChannel.on('resetServices', () => {
			selectedTags.value = [];
			selectedServiceItems.value.clear();
			updateListDisabledStatus();
		});
	});

	// 加载服务分类数据
	const loadServiceData = async () => {
		try {
			const res = await getServiceInfoList()
			console.log('服务数据:', res)

			if (res.code === 200 && res.data) {
				const {
					sevList,
					sevTypeList,
					sevItemList
				} = res.data
				// 转换为三级嵌套结构
				list.value = convertToNestedStructure(sevTypeList, sevList, sevItemList)
			}
		} catch (error) {
			console.error('获取服务数据失败', error)
		}
	}

	// 转换数据为嵌套结构（适配分类组件）
	const convertToNestedStructure = (level1List, level2List, level3List) => {
		return level1List.map(level1 => {
			// 1. 筛选当前一级类目下的二级类目（parentId === 一级id）
			const matchedLevel2 = level2List.filter(level2 => level2.parentId == level1.id)

			// 2. 为每个二级类目匹配三级类目
			const children = matchedLevel2.map(level2 => {
				// 筛选当前二级类目下的三级类目（parentId === 二级id）
				const matchedLevel3 = level3List.filter(level3 => level3.parentId == level2.id)

				// 3. 转换三级类目为组件所需格式
				const level3Items = matchedLevel3.map(level3 => {
					// 提取三级类目ID（第二个'-'后面的值）
					const thirdLevelId = level3.id.split('-')[2]
					return {
						id: thirdLevelId, // 使用提取的三级ID
						name: level3.name,
						disabled: false,
						checked: false
					}
				})

				// 返回二级类目结构（包含三级类目）
				return {
					id: level2.id,
					name: level2.name,
					children: level3Items, // 三级类目列表
					selectedIds: {} // 组件记录选中状态
				}
			})

			// 返回一级类目结构（包含二级类目）
			return {
				id: level1.id,
				name: level1.name,
				children: children, // 二级类目列表
				selectedIds: {} // 组件记录选中状态
			}
		})
	}

	// 删除已选择的服务项
	const removeTag = (index) => {
		const removedTag = selectedTags.value[index]
		selectedTags.value.splice(index, 1)
		if (removedTag.serviceItemId && !removedTag.isCustom) {
			selectedServiceItems.value.delete(removedTag.serviceItemId)
		}
		updateListDisabledStatus()
	}

	// 处理分类组件选择的服务项（核心修复：增量更新）
	const handleCategoryChange = (newSelectedItems) => {
		// 1. 提取新选择的服务项ID
		const newSelectedIds = new Set(newSelectedItems.map(item => item.id))

		// 2. 计算差异：需要添加和删除的项
		const toAdd = []
		const toRemove = []

		// 找出新增项（新选择但不在原集合中）
		newSelectedIds.forEach(id => {
			if (!selectedServiceItems.value.has(id)) {
				toAdd.push(id)
			}
		})

		// 找出删除项（原集合有但新选择没有）
		selectedServiceItems.value.forEach(id => {
			if (!newSelectedIds.has(id)) {
				toRemove.push(id)
			}
		})

		// 3. 检查新增项是否超过剩余可选数量
		const remainingSlots = maxSelectable - (selectedTags.value.filter(tag => !tag.isCustom).length - toRemove
			.length)
		if (toAdd.length > remainingSlots) {
			uni.showToast({
				title: `最多只能选择${maxSelectable}个服务项`,
				icon: 'none'
			})
			return
		}

		// 4. 执行增量更新
		toAdd.forEach(id => selectedServiceItems.value.add(id))
		toRemove.forEach(id => selectedServiceItems.value.delete(id))

		// 5. 更新标签列表
		const customTags = selectedTags.value.filter(tag => tag.isCustom)
		const systemTags = Array.from(selectedServiceItems.value).map(id => {
			// 从新选择项中获取名称
			const item = newSelectedItems.find(item => item.id === id)
			return {
				id,
				name: item?.name || '',
				serviceItemId: id,
				isCustom: false
			}
		})

		// 合并系统标签和自定义标签
		selectedTags.value = [...systemTags, ...customTags]

		updateListDisabledStatus()
	}

	// 更新分类项的禁用状态
	const updateListDisabledStatus = () => {
		const canSelectMore = selectedServiceItems.value.size < maxSelectable
		list.value = list.value.map(level1 => ({
			...level1,
			children: level1.children.map(level2 => ({
				...level2,
				children: level2.children.map(level3 => ({
					...level3,
					disabled: !canSelectMore && !selectedServiceItems.value.has(
						level3.id),
					checked: selectedServiceItems.value.has(level3.id)
				}))
			}))
		}))
	}

	// 添加自定义服务项
	const addTag = async () => {
		const trimmedTag = newTag.value.trim()
		if (!trimmedTag) {
			uni.showToast({
				title: '请输入标签内容',
				icon: 'none'
			})
			return
		}

		if (selectedTags.value.length >= maxSelectable) {
			uni.showToast({
				title: '最多只能选择5个服务项',
				icon: 'none'
			})
			return
		}

		if (selectedTags.value.some(tag => tag.name === trimmedTag)) {
			uni.showToast({
				title: '已存在相同名称的标签',
				icon: 'none'
			})
			return
		}

		try {
			const res = await addServiceItem({
				name: trimmedTag
			})
			if (res.code === 200) {
				selectedTags.value.push({
					id: `custom_${Date.now()}`,
					name: trimmedTag,
					isCustom: true
				})
				newTag.value = ''
				uni.showToast({
					title: msg,
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: msg || '添加失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('添加服务项失败', error)
			uni.showToast({
				title: '添加失败，请重试',
				icon: 'none'
			})
		}
	}

	// 重置选择
	const handleReset = () => {
		selectedTags.value = []
		selectedServiceItems.value = new Set()
		newTag.value = ''
		updateListDisabledStatus()
	}

	// 确认选择并返回数据
	const handleConfirm = () => {
		if (selectedTags.value.length === 0) {
			uni.showToast({
				title: '请至少选择一个服务项',
				icon: 'none'
			});
			return;
		}
		// 提取所有选中服务项的 ID（如果是系统服务项用 serviceItemId，自定义服务项用 id）
		const serviceItemIds = selectedTags.value.map(tag =>
			tag.isCustom ? tag.id : tag.serviceItemId
		).join(','); // 用逗号分隔
		// 获取事件通道
		const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel();

		// 发送数据到父页面
		eventChannel.emit('updateSelectedServices', {
			selectedServices: selectedTags.value,
			serviceItemIds: serviceItemIds // 传递逗号分隔的 ID 字符串
		});

		eventChannel.emit('acceptDataFromOpenedPage', {
			selectedServices: selectedTags.value,
			serviceItemIds: selectedTags.value.map(tag =>
				tag.isCustom ? tag.id : tag.serviceItemId
			).join(',')
		});

		// 返回上一页
		uni.navigateBack();
	};

	onMounted(() => {
		loadServiceData()
	})
</script>

<style lang="scss" scoped>
	/* 样式保持不变 */
	.content {
		padding: 26rpx 24rpx;
		padding-bottom: 120rpx;
		background: #F5F5F5;

		.top {
			padding: 28rpx 29rpx 36rpx 25rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #303133;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				margin: 20rpx 0 24rpx;

				.item {
					width: 33.33%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #2F80ED;
					padding: 15rpx 19rpx;
					background: #E5F0FF;
					border-radius: 6rpx;
					margin: 0 20rpx 20rpx 0;
				}
			}

			.tag-input-container {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tag-input {
					background: #F6F6F6;
					border-radius: 6rpx;
					padding: 19rpx;
					flex: 1;
				}

				.add-tag-btn {
					width: 140rpx;
					padding: 19rpx 0;
					margin-left: 24rpx;
					text-align: center;
					background: #2F80ED;
					border-radius: 6rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}

		.bottom {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 10rpx;
			box-sizing: border-box;
		}


	}

	.button-group {
		width: 685rpx;
		height: 166rpx;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		align-items: center;
		padding: 0 37rpx;

		button {
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 30rpx;
			margin: 0;
			padding: 0;

			&::after {
				border: none;
			}
		}

		.reset-btn {
			width: 189rpx;
			height: 88rpx;
			background: #999999;
			color: #fff;
		}

		.confirm-btn {
			width: 489rpx;
			height: 88rpx;
			background: #2F80ED;
			color: #FFFFFF;
		}
	}
</style>